<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover" />
		<title></title>
		<style type="text/css">
			li>img {
				width: 40px;
				height: 40px;
			}
		</style>
		<script src="js/Vue.js" type="text/javascript" charset="utf-8"></script>
		<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

	</head>
	<body>
		<div>list列表示例(指令)</div>
		<div id="app">
			<ul id="ul">
				<li v-for="item in list">
					<img v-bind:src="item.img" v-if="item.img">
					{{item.msg}}
				</li>
			</ul>
		</div>
		<div>list列表示例(组件+指令嵌套+过滤器)</div>
		<div id="app2">
			<ul id="ul2">
				<component-li v-for="item in list" v-bind:img="item.img" v-bind:msg="item.msg">
				</component-li>
			</ul>
		</div>
		<script type="text/javascript">
			//app
			var vm = new Vue({
				el: "#app",
				data: {
					list:[],
				},
			});
			//ajaxGet请求
			axios.get("http://192.168.3.107:3712/api/JsonpCros/GetListMsg").then(function(res){
				console.log(res)
				vm.list=res.data;
			})
			//app2
			//全局注册组件
			Vue.component('component-li', {
				props: ["img", "msg"],
				filters: {
				  capitalize: function (value) {
				    if (!value) return ''
				    value = value.toString()
				    return "这是内容被修改了";
				  }
				},
				template: '<li><img v-if="img" v-bind:src="img" > {{msg|capitalize}}</li>'
			})

			//
			var vm2 = new Vue({
				el: "#app2",
				data: {
					list: []
				},
			});
			
			//ajaxGet请求
			axios.get("http://192.168.3.107:3712/api/JsonpCros/GetListMsg").then(function(res){
				vm2.list=res.data;
			})
		</script>
	</body>
</html>
